<template>
  <div class="filter">
    <div class="filter_item">
      类型：<Select v-model="type" style="width: 200px" @on-change="typeChange" clearable>
        <Option v-for="item in types" :value="item.value" :key="item.value">{{
          item.value
        }}</Option>
      </Select>
    </div>
    <div class="filter_item">
      价格：<Input
        v-model="priceBegin"
        clearable
        style="width: 70px"
      />———<Input v-model="priceEnd" clearable style="width: 70px" />
    </div>
    <div class="filter_item">
      消费时间：<DatePicker
        type="month"
        placeholder="选择月份"
        style="width: 200px"
        @on-change="monthChange"
      ></DatePicker>
    </div>
    <div class="filter_item">
      <Button type="primary" @click="getSpend">查询</Button>
    </div>
    <div class="filter_item">
      <Table ref="table" :columns="colums" :data="list" border></Table>
      <div class="page">
        <Page :total="total" @on-change="pageChange" show-elevator />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
export default {
  name: "ExpensesDayily",
  data() {
    return {
      begin: null,
      end: null,
      type: "",
      types: [
        {
          key: "收入",
          value: "收入",
        },
        {
          key: "支出",
          value: "支出",
        },
      ],
      priceBegin: 0,
      priceEnd: 0,
      month: "",
      pageNo: 1,
      total: 0,
      list: [],
      colums: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: 80,
        },
        {
          key: "reportName",
          title: "报备名称",
          align: "center",
        },
        {
          key: "type",
          title: "类型",
          align: "center",
        },
        {
          key: "priceSum",
          title: "价格",
          align: "center",
        },
        {
          key: "creationDate",
          title: "消费时间",
          align: "center",
        },
      ],
    };
  },
  methods: {
    monthChange(e) {
      this.month = e;
    },
    pageChange(e) {
      this.pageNo = e;
      this.getSpend();
    },
    typeChange(e) {
      this.type = e;
    },
    getSpend() {
      if (this.month != "") {
        let temp = {
          begin: moment(this.month).startOf("month"), //npm install moment --save
          end: moment(this.month).endOf("month"),
        };
        this.begin = moment(temp.begin._d).format("yyyy-MM-DD HH:mm:ss");
        this.end = moment(temp.end._d).format("yyyy-MM-DD HH:mm:ss");
      }
      axios
        .post("/api/report/getAllReport", {
          type: this.type?this.type:null,
          priceBegin: this.priceBegin?this.priceBegin:null,
          priceEnd: this.priceEnd?this.priceEnd:null,
          begin: this.begin,
          end: this.end,
          pageNo:this.pageNo
        })
        .then((res) => {
          let data = res.data.data;
          this.list = data.pageList;
          this.total = data.recordCount;
          console.log(data);
        });
    }
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table {
  margin-top: 30px;
  width: 1260px;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>